<template>
  <div
    v-loading="loading"
    class="ai-parser-loading"
    style="margin-bottom: 10px"
    :element-loading-text="$t('fleet.aiRecognizing')"
    element-loading-background="rgba(0, 0, 0, 0.3)"
  >
    <TextInput
      v-model="modelValue"
      type="textarea"
      :maxlength="512"
      :rows="4"
      :placeholder="placeholder"
    />
    <el-button class="ai-btn" type="primary" @click="handlePasteRecognize">{{
      $t('fleet.AiRecognize')
    }}</el-button>
  </div>
</template>

<script setup>
defineProps({
  loading: {
    type: Boolean,
    default: false
  },
  placeholder: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['aiClick'])
const modelValue = defineModel({
  type: String,
  default: ''
})
const handlePasteRecognize = () => {
  emit('aiClick')
}
</script>

<style scoped lang="scss">
.ai-parser-loading {
  position: relative;
  :deep(.el-loading-mask) {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  :deep(.el-loading-spinner) {
    position: relative;
    top: 0;
    margin-top: 0;
    .path {
      stroke: var(--primary-theme);
    }
    .el-loading-text {
      font-size: 14px;
    }
  }
  .ai-btn {
    position: absolute;
    bottom: 5px;
    right: 5px;
    padding: 5px 10px;
  }
}
</style>
